<template>
    <div>
        <h1>门店增加</h1>
        <table class="table table-bordered">
           <tbody>
            <tr>
                <td align="right">门店名称</td>
                <td><input type="text" v-model="info.shopName"></td>
            </tr>
            <tr>
                <td align="right">分店名称</td>
                <td><input type="text" v-model="info.branchName"></td>
            </tr>
            <tr>
                <td align="right">门店图片</td>
                <td><input type="file" @change="img">
                    <img :src="info.photo" width="100" height="100" v-if="info.photo!=''">
                </td>
            </tr>
            <tr>
                <td align="right">开业时间</td>
                <td><input type="date" v-model="info.openTime"></td>
            </tr>
            <tr>
                <td align="right">门店状态</td>
                <td><input type="radio" name="state" :value="true" v-model="info.state">开启
                    <input type="radio" name="state" :value="false" v-model="info.state">禁用
                </td>
            </tr>
            <tr>
                <td align="right">门店特色</td>
                <td><input type="checkbox" name="tese" v-model="info.teSe" value="办婚宴">办婚宴
                    <input type="checkbox" name="tese" v-model="info.teSe" value="办升学宴">办升学宴
                    <input type="checkbox" name="tese" v-model="info.teSe" value="满月">满月
                    <input type="checkbox" name="tese" v-model="info.teSe" value="彭于晏">彭于晏
                </td>
            </tr>
            <tr>
                <td align="right">联系电话</td>
                <td><input type="text" v-model="info.tel"></td>
            </tr>
            <tr>
                <td align="right">门店简介</td>
                <td><input type="text" v-model="info.desc"></td>
            </tr>
            <!--绑定下拉-->
            <tr>
                <td align="right">门店地址</td>
                <td>
                    <select v-model="info.addressId">
                        <option value="">请选择</option>
                        <option :value="item.addId" v-for="item in AddresList">
                                {{ item.addresName }}
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">门店类型</td>
                <td>
                    <select v-model="info.shopType">
                        <option value="">请选择</option>
                        <option value="">竞技酒店</option>
                        <option value="">豪华酒店</option>
                        <option value="">普通酒店</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right"></td>
                <td><input type="button" value="确定" class="btn btn-success" @click="ok"></td>
            </tr>
           </tbody>
        </table>
        
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import{ref,reactive,onMounted}from 'vue'
import{useRouter,useRoute}from 'vue-router'
import moment from 'moment'
const router=useRouter()
const route=useRoute()

let info:any=reactive({
  "shopName": "",
  "branchName": "",
  "photo": "",
  "openTime": "",
  "state": true,
  "teSe": [],
  "tel": "",
  "desc": "",
  "addressId": "",
  "shopType": ""
})

let AddresList:any=ref([{
    addId:'',
    addresName:''
}]);

//绑定下拉
onMounted(()=>{
    getAddresList();
});
const getAddresList=()=>{
    axios({
        url:'/api/Shop/GetAddresses',
        method:'get'
    })
    .then((res)=>{
         console.log(res);
         AddresList.value=res.data;
    })  
    .then((err)=>{
         console.log(err);
    })  
};

//前端图片上传
const img=(e:any)=>{
    //e表示事件对象  只要触发事件就会存在事件对象
    //获取上传的文件
    var obj=e.target.files[0];
    //上传的文件转成formDate格式 转成表单对象并且是键值对形式
    let f=new FormData(); //创建空的表单对象
    f.append('file',obj)

    //图片上传
    axios({
         url:'/api/imgs/Img',
         method:'post',
         data:f
    })
    .then((res)=>{
        console.log(res)
        if(res.data=='不是图片'){
            alert('您上传的不是图片');
            return;
        }
         info.photo=res.data;
    })
    .catch((err)=>{
        console.log(err)
    })
} 

//添加
const ok=()=>{
  if (info.shopName == '') {
    alert('门店名称不能为空');
    return;
  }
  if (info.branchName == '') {
    alert('分店名称不能为空');
    return;
  }
  if (info.photo == '') {
    alert('图片不能为空');
    return;
  }
  if (info.openTime == '') {
    alert('开业时间不能为空');
    return;
  }
  if (info.teSe.length == '') {
    alert('门店特色必选');
    return;
  }
  if (info.tel == '') {
    alert('联系电话不能为空');
    return;
  }
  if (info.desc == '') {
    alert('简介不能为空');
    return;
  }
  if (info.desc.length > 50) {
    alert('简介的长度不能超过50');
    return;
  }
  if (info.addressId == '') {
    alert('地址必选');
    return;
  }
  if (info.shopType == '') {
    alert('酒店类型必选');
    
  }


info.teSe=info.teSe.toString();
axios({
    url:'/api/Shop/AddShop',
    method:'post',
    data:info
})
.then((res)=>{
    console.log(res);
    if(res.data>0){
        alert('添加成功');
        router.push('/shopList');
        return;
    }
    else{
        alert('添加失败');
        return;
    }
})
.catch((err)=>{
    console.log(err);
})

}

</script>
<style scoped>

</style>
